<template>
	<view class="" style="padding-bottom: 150rpx;">
		<!-- 类型弹框 -->
		<u-popup :show="lxshow" @close="lxshow=false" mode="bottom">
			<view class="xiangaotk" style="height: 600rpx;">
				<view class="" style="padding: 30rpx 0 60rpx;">
					<view class="xiahuaxian ershiba textcenter margin_top"
						:class="type==0?'fonweight xiaohei':'nofonweight xiaohui'" @click="type=0">全部</view>
					<view class="xiahuaxian ershiba textcenter margin_top"
						:class="type==1?'fonweight xiaohei':'nofonweight xiaohui'" @click="type=1">单人赛</view>
					<view class="xiahuaxian ershiba textcenter margin_top"
						:class="type==2?'fonweight xiaohei':'nofonweight xiaohui'" @click="type=2">团体赛</view>
				</view>
				<view class="flexbetween gudingdb ffffff mainpadding" style="z-index: 12;">
					<view class="wushi flexcenter">
						<view class="chongzhibtn" @click="type=0;lxclose()">重置</view>
					</view>
					<view class="wushi flexcenter" @click="lxclose()">
						<view class="quedbtn">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 项目弹框 -->
		<u-popup :show="xmshow" @close="xmshow=false" mode="bottom">
			<view class="xiangaotk" style="height: auto;min-height: 400rpx;">
				<view class="flexleft flex_wrap" style="padding: 30rpx 30rpx 140rpx;">
					<view class="ershiw flexcenter margin_top" v-for="item in xmList" :key="item.id" @click="item.ischeck=!item.ischeck">
						<view :class="item.ischeck?'lvsebtn':'huisebtn'">{{item.name}}</view>
					</view>
				</view>
				<view class="flexbetween gudingdb ffffff mainpadding" style="z-index: 12;">
					<view class="wushi flexcenter" @click="xmreset">
						<view class="chongzhibtn">重置</view>
					</view>
					<view class="wushi flexcenter" @click="xmclose">
						<view class="quedbtn">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 时间 -->
		<u-popup :show="sjshow" @close="sjclose" mode="bottom">
			<view class="xiangaotk" style="height: 400rpx;">
				<shijian :messageInfo="{start_time,end_time,mintime}" @confirm="checktime"></shijian>
			</view>
		</u-popup>
		<view class="ffffff mainpadding">
			<!-- 搜索 -->
			<view class="flexbetween">
				<view class="" @click="dakdiz">
					<view class="dizhi marginauto"></view>
					<view class="strongtext nofonweight sanzi xiaohei">{{cityinfo.name}}</view>
				</view>
				<view class="flexright ffffff">
					<view class="ssousuobox margin_right1">
						<input type="text" placeholder="请输入搜索内容" style="width: 442rpx;" v-model="keywords" @confirm="init()" confirm-type="search">
					</view>
					<view class="ershiba xiaohei nofonweight" @click="init">搜索</view>
				</view>
			</view>
			<!-- 轮播 -->
			<view class="margin_top">
				<u-swiper :list="list1" circular height="180px"  @click="tzlbxq"></u-swiper>
			</view>
			<!-- 公告 -->
			<view class="margin_top radius" @click="tzgg">
				<u-notice-bar :text="text1" direction="column" bgColor="#F9F9F9" color="#777777"></u-notice-bar>
			</view>
		</view>
		<!--场地预定 和 课程购买-->
		<view class="margin_top2 ffffff mainpadding">
			<!-- 筛选 -->
			<view class="flexbetween margin_top">
				<!-- <view class="flexleft" @click="qyshow = true">
					<view class="xiaohei ershil nofonweight margin_right1">城市</view>
					<view class="xiasajx"></view>
				</view> -->
				<view class="flexleft" @click="dakdiz(1)">
					<view class="xiaohei ershil nofonweight sanzi margin_right1">
						{{checkaddressinfo.name || cityinfo.name}}
					</view>
					<view class="xiasajx"></view>
				</view>

				<view class="flexleft" @click="sjshow = true">
					<view class="xiaohei ershil nofonweight margin_right1">时间</view>
					<view class="xiasajx"></view>
				</view>
				<view class="flexleft" @click="xmshow = true">
					<view class="xiaohei ershil nofonweight margin_right1">项目</view>
					<view class="xiasajx"></view>
				</view>
				<view class="flexleft" @click="lxshow = true">
					<view class="xiaohei ershil nofonweight margin_right1">类型</view>
					<view class="xiasajx"></view>
				</view>
				<view class="flexleft" @click="changegmpx">
					<view class="xiaohei ershil nofonweight margin_right1">规模</view>
					<view class="">
						<view class="shangsjx" v-show="gm_sort!=2"></view>
						<view class="shangsjxs" v-show="gm_sort==2"></view>
						<view class="xiasajx  margin_top0"  v-show="gm_sort!=1"></view>
						<view class="xiasajxs  margin_top0"  v-show="gm_sort==1"></view>
					</view>
				</view>
			</view>
			<!-- 按钮分类 -->
			<view class="margin_top">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="scroll-view-item_H uni-bg-red" v-for="item in ssbqList" :key="item.id" @click="checkssbq(item)">
						<!-- 未选中 -->
						<view :class="item.id==ss_bq_id?'lvbtn margin_right1':'huibtn margin_right1'">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- 课程 -->
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzxq(item.id)">
				<view class="flexbetween">
					<view class="shilitu">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="flexleft">
							<!-- 1=未开始,2=报名中,3=待开赛,4=已开赛,5=赛事结束 -->
							<view class="xiaolhbtn margin_right1" v-if="item.ss_status==1">未开始</view>
							<view class="xiaocbtn margin_right1" v-if="item.ss_status==2">报名中</view>
							<view class="xiaolabtn margin_right1" v-if="item.ss_status==3">待开赛</view>
							<view class="xiaojubtn margin_right1" v-if="item.ss_status==4">已开赛</view>
							<view class="xiaohbtn margin_right1" v-if="item.ss_status==5">赛事结束</view>
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
						</view>
						<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">
							开始时间：{{item.bm_starttime_text}}</view>
						<view class="strongtext xiaohui nofonweight margin_right2 margin_top1">
							截至时间：{{item.bm_endtime_text}}</view>
						<view class="strongtext xiaohui nofonweight margin_right2 yhxk margin_top1">{{item.cityinfo}}{{item.address}}</view>
					</view>
				</view>
			</view>
		</view>
		<tabbaryhd current=1></tabbaryhd>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				qyshow: false, //城市

				xmshow: false, //项目
				lxshow: false, //类型
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list1: [],
				text1: [],
				currenttabtow: 0,
				lat: "",
				lng: "",
				cityinfo: {},
				checkaddressinfo: {},
				bannerList: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				type: 0, //类型:1=个人赛,2=团体赛,0=全部
				// 时间筛选开始
				sjshow: false, //时间
				start_time: "",
				end_time: "",
				mintime: Number(new Date()), // 时间筛选结束
				// 项目
				xmList:[],
				cg_category_ids:"",
				gm_sort:0,//规模排序:1=降序,2=升序,0=不查询
				keywords:"",
				// 赛事标签
				ssbqList:[],
				ss_bq_id:"",

			}
		},
		onShareAppMessage: function() {
			return {
				title: '动佳',
				path: '/pages/kaiping'
			}
		},
		onShareTimeline: function() {
			return {
				title: '动佳',
				path: '/pages/kaiping'
			}
		},
		onLoad() {
			uni.hideTabBar()
			let cityinfo = uni.getStorageSync("cityinfo")
			if (!cityinfo.id) {
				this.getlocation()
			} else {
				this.cityinfo = cityinfo
			}
			this.getbanner()
			this.getgonggao()
			this.getcgfl() //场馆分类/项目
			this.getssbq() //赛事标签
		},
		onShow() {
			let cityinfo = uni.getStorageSync("cityinfo")
			if (cityinfo.id) {
				this.cityinfo = cityinfo
			}
			this.init()
		},
		methods: {
			getssbq() {
				httpRequest.request('/api/sscl/ssBqIndex', 'POST', {}, false, false, true).then(res => {
					this.ssbqList = res.data
				})
			},
			getcgfl() {
				httpRequest.request('/api/index/cgCategory', 'POST', {}, false, false, true).then(res => {
					res.data.forEach(item=>{
						this.$set(item,"ischeck",false)
					})
					this.xmList = res.data
				})
			},
			checktime(e) {
				this.start_time = e.start
				this.end_time = e.end
				this.mintime = e.mintime
				this.sjshow = false
				this.init()
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					city_id: this.checkaddressinfo.id || this.cityinfo.id,
					start_time: this.start_time,
					end_time: this.end_time,
					cg_category_ids:this.cg_category_ids,
					type:this.type,
					gm_sort:this.gm_sort,
					keywords:this.keywords,
					ss_bq_id:this.ss_bq_id,
					ss_type:1,//赛事类型:1=主办方,2=俱乐部
				}
				let url = '/api/sscl/ssIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getgonggao() {
				httpRequest.request('/api/index/niticeindex', 'POST', {
					page: 1,
					limit: 12,
					type: 2
				}, false, false, true).then(res => {
					let arr = []
					res.data.data.forEach(item => {
						arr.push(item.title)
					})
					this.text1 = arr
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 5,
					is_more: 1
				}, false, false, true).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
					this.bannerList = res.data
				})
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						console.log(res, "999");
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getcityInfo()
					},
					fail(err) {
						console.log(err, 23432);
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.cityinfo = {
						name: res.data.name,
						lat: res.data.lat,
						lng: res.data.lng,
						id: res.data.id,
						pid: res.data.pid
					}
					uni.setStorageSync("cityinfo", this.cityinfo)
				})
			},
			
			// 跳转赛事详情
			tzxq(id) {
				uni.navigateTo({
					url: '/pages_saishi/saishixq?id='+id
				})
			},
			// 跳转轮播详情
			tzlbxq(e) {
				uni.navigateTo({
					url: '/pages_homepage/bannerxq?id=' + this.bannerList[e].id
				})
			},
			// 跳转公告
			tzgg() {
				uni.navigateTo({
					url: '/pages_homepage/gonggao?type=2'
				})
			},
			// 类型
			lxclose() {
				this.lxshow = false
				this.init()
			},
			// 项目
			xmreset(){
				this.xmList.forEach(item=>{
					item.ischeck = false
				})
				this.xmclose()
			},
			xmclose() {
				this.xmshow = false
				let arr = []
				this.xmList.forEach(item=>{
					if(item.ischeck){
						arr.push(item.id)
					}
				})
				this.cg_category_ids = arr.join()
				this.init()
			},
			// 赛事标签
			checkssbq(item){
				this.ss_bq_id = item.id
				this.init()
			},
			// 城市
			qyclose() {
				this.qyshow = false
			},
			// 时间
			sjclose() {
				this.sjshow = false
			},
			changetab(e) {
				this.currenttabtow = e.index;
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			changegmpx(){
				this.gm_sort = this.gm_sort==1?2:this.gm_sort==2?0:1
				this.init()
			},
			// 跳转位置
			dakdiz(val) {
				if (val == 1) {
					uni.navigateTo({
						url: '/pages_homepage/dingwei?type=1'
					})
					return false
				}
				uni.navigateTo({
					url: '/pages_homepage/dingwei'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sanzi {
		width: 85rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.huisebtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lvsebtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolabtn {
		width: 80rpx;
		height: 40rpx;
		background: #078CE6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaohbtn {
		width: 100rpx;
		height: 40rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #091636;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolhbtn {
		width: 80rpx;
		height: 40rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaojubtn {
		width: 80rpx;
		height: 40rpx;
		background: #F8B900;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaocbtn {
		width: 80rpx;
		height: 40rpx;
		background: #F76222;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.guangtu {
		width: 536rpx;
		height: 856rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.quedbtn {
		width: 292rpx;
		height: 72rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chongzhibtn {
		width: 292rpx;
		height: 72rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wushi {
		width: 50%;
	}

	.dyshaow {
		position: absolute;
		bottom: -190rpx;
		width: 15%;
		z-index: 1;
		left: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}

	.lvbtn {
		background: #DFFFED;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1BA95B;
	}

	.margin_top0 {
		margin-top: 6rpx;
	}

	.shangsjx {
		width: 10rpx;
		height: 8rpx;
		background-image: url('@/static/image/system/shangsjx.png');
		background-size: 100% 100%;
	}

	.xiasajx {
		width: 10rpx;
		height: 8rpx;
		background-image: url('@/static/image/system/xiasanj.png');
		background-size: 100% 100%;
	}


	.anicon {
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.weixbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0, 0, 0, 0.09);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 36rpx 20rpx 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.xuanzbtn {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1BA95B;
		box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0, 0, 0, 0.09);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx 36rpx 20rpx 20rpx;
	}

	page {
		background-color: #F9F9F9;
	}

	.dftp {
		width: 330rpx;
		height: 140rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.xfltup {
		width: 212rpx;
		height: 140rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.u-notice-bar {
		border-radius: 8rpx;
	}

	::v-deep.u-icon__icon {
		color: #1BA95B !important;
	}

	.line {
		width: 2rpx;
		height: 24rpx;
		background: #EEEEEE;
	}

	.xxuanze {
		width: 22.77rpx;
		height: 12.77rpx;

	}
</style>